<template>
	<div class="due CommonHeight">
		<view class="status_bar"></view>
		<!-- 因为背景色不同，所以传入一个标题用来进行判断 -->
		<navBar text="待付款">
			<template v-slot:head>
				<image class="headPic" src="../../static/images/Shop/usage.png" mode=""></image>
				<text>待付款</text>
			</template>
			<template v-slot:subhead>
				剩余
				<text style="color: #ffffff;margin: 0 5px;">{{ message }}</text>
				自动关闭订单
			</template>
		</navBar>
		<div class="secureCaseBox">
			<!-- 修改地址 -->
			<addressEdit phoneName='李二狗' Telephone="17276726953" Address='北京市朝阳区劲松街道华腾园6-1508北京市朝阳区劲松街道华腾园'>
			</addressEdit>
			<!-- 货物价值 -->
			<shopPro>
				<template v-slot:shopName>{{product.productName}}</template>
				<!-- <template v-slot:residue><van-tag plain type="danger" class='residue'>剩余123台</van-tag></template> -->
				<template v-slot:countNum>
					<span>*{{product.count}}</span>
					<span>${{product.productPrice}}</span>
				</template>
				<template v-slot:freight>
					<span>运费</span>
					<span>{{product.freightPrice}}USDT</span>
				</template>
				<template v-slot:line>
					<div class="van-hairline--top"></div>
				</template>
				<template v-slot:needToPay>
					<span>需付款</span>
					<!-- 不确定是1100 -->
					<span class='sum colorRed'>{{product.productPrice*product.count+product.freightPrice}}USDT</span>
				</template>
			</shopPro>
			<!-- 订单编号，创建时间 -->
			<orderInfo style="width: 91%;">
				<template v-slot:order>
					<div class="order">
						<span>订单编号</span>
						<div class='colorGray colorFFF' @click='copy(orderNum)'>
							<span>{{orderNum}}</span>
							<image src="../../static/images/Order/tracking_copy.png" mode="widthFix"></image>
						</div>
					</div>
				</template>
				<template v-slot:time>
					<div class="time">
						<span>创建时间</span>
						<span class='colorGray colorFFF'>{{creationTime}}</span>
					</div>
				</template>
			</orderInfo>
			<!-- 联系我们 -->
			<!-- <ContactUs></ContactUs> -->
		</div>
		<!-- 操作 -->
		<Operate>
			<template v-slot:buy>
				<div class="operate">
					<div class="cancel" @click='Cancel'>取消订单</div>
					<div class="buy">
						<van-button plain class="editAddress btnBorder">修改地址</van-button>
						<van-button type="primary" class="commonBtn" @click="showPopup">立即购买</van-button>
					</div>
				</div>
			</template>
		</Operate>
		<van-popup v-model:show="showBottom" position="bottom" :style="{ height: '80%',background:'#222324' }">
			<!-- <securityKey duePag="duePag" @FlagA="FlagA"></securityKey> -->
			<KeyBoard :ShowPayment='showBottom' duePag="duePag" @FlagA='FlagA'>
				<template v-slot:verifyBtn>
					<view @click="complete">确认</view>
				</template>
			</KeyBoard>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
	import { startCountdown, message, intervalId } from '../../utils/countDown.ts'
	import { copy } from '../../utils/copy.ts'
	import { useStore } from 'vuex'
	import type { Product } from "@/types/product.js";
	import KeyBoard from '../../components/product/KeyBoard/index.vue'
	// const emit = defineEmits(["closePaySuccess", "clickShowPaySuecc"]);
	const store = useStore()

	const showBottom = ref(false)
	const countDown = ref(null)
	// 商城的数据
	let product : Product = store.state.product;
	// copy功能
	const orderNum = ref('168516518165168165')

	// 关闭键盘弹出层
	const FlagA = (val : any) : void => {
		console.log(val);
		showBottom.value = val
	}

	// 完成
	const complete = () : void => {
		console.log(store.state.KeyValue)
		let KeyValue = store.state.KeyValue
		if (KeyValue === "") return;
		// 将KeyValue密码存到本地存储或者vuex(后期改)
		// emit("clickShowPaySuecc", true);

		// 获取支付时间
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		let hours = date.getHours();
		let minutes = date.getMinutes();
		let seconds = date.getSeconds();
		let fullDateStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
		console.log(fullDateStr);
		store.commit('savePaymentTimeFn', fullDateStr)

		if (store.state.title === '寄回') {
			uni.navigateTo({
				url: "/subdue/wait/index"
			})
		} else if (store.state.title === '设备兑换券') {
			uni.navigateTo({
				url: "/subdue/closeTheDeal/index"
			})
		} else if (store.state.title === '托管') {
			uni.navigateTo({
				url: "/subdue/closeTheDeal/index"
			})
		}

		// uni.redirectTo({
		// 	url: "/subdue/closeTheDeal/index?status=true",
		// });
		// 可以改成正规的调用vuex里面的mutation方法
		store.state.KeyValue = ''
	};

	// 取消订单
	const Cancel = () : void => {
		uni.redirectTo({
			url: "/subdue/closeDeal/index",
		});
	}
	// 支付弹框
	const showPopup = () : void => {
		showBottom.value = true;
		// countDown.value!.pause();
	};

	// 启动倒计时
	onMounted(() => {
		startCountdown();
	})
	// 摧毁定时器
	onBeforeUnmount(() => {
		console.log(intervalId)
		clearInterval(intervalId.value)
	})

	// 创建订单的时间
	const creationTime = computed(() => {
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		let hours = date.getHours();
		let minutes = date.getMinutes();
		let seconds = date.getSeconds();
		let fullDateStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
		// console.log(fullDateStr);
		store.commit('saveTimeFn', fullDateStr)
		return fullDateStr
	})
</script>

<style lang="scss" scoped>
	.due {
		position: relative;

		.headPic {
			width: 41px;
			height: 44px;
			margin-right: 21px;
		}
	}

	// ::v-deep.order,
	// ::v-deep.time {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	font-size: 24px;
	// 	font-family: PingFangSC-Regular, PingFang SC;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// 	line-height: 80px;

	// 	.colorGray {
	// 		display: flex;
	// 		align-items: center;
	// 		max-width: 482px;
	// 		/* color: #; */
	// 		text-align: right;

	// 		image {
	// 			width: 30px;
	// 			margin: 0 4px;
	// 		}
	// 	}
	// }

	// .secureCaseBox {
	// 	position: absolute;
	// 	top: 20%;
	// 	left: 0;
	// 	width: 100%;
	// 	border-radius: 30px;
	// 	background-color: rgba(18, 19, 22, 1);

	// 	.secureCaseContent {
	// 		padding: 40px 0 40px 0;
	// 	}
	// }

	.colorRed {
		color: rgba(248, 68, 77, 1);
		font-size: 32px;
	}
</style>